<template>
  <div id="Detail">

    <div class="search-bar">
      <!-- 天天生鲜logo -->
      <a href="index.html"><img src="../assets/images/logo.png" class="logo"></a>

      <!-- 购物车 -->
      <!-- 购物车 -->
      <div class="guest_cart fr">
        <a href="#/cart" class="cart_name fl">我的购物车</a>
        <div class="goods_count fl" id="show_count">1</div>
      </div>
    </div>

    <div class="navbar_con">
      <div class="navbar">
        <h1 class="fl">商品详情页</h1>
        <ul class="navlist fl">
          <li><a href="">首页</a></li>
        </ul>
      </div>
    </div>

    <div class="list-model">
      <div class="product-details">
        <div class="product-image">
          <img :src="serverApiUrl + product.imgurl">
        </div>
        <div class="product-info">
          <div class="product-name">{{ product.name }}</div>
          <div class="product-description">{{ product.detail }}</div>
          <div class="product-price-row">
            <span class="product-price">${{ product.price | toDecimal2 }}</span>
            <span class="product-unit">单位：{{ product.unit }}</span>
            <span class="product-quantity">库存: {{ product.quantity }}</span>
          </div>
          <div class="product-quantity-row">
            <p>数量</p>
            <div class="quantity-input">
              <button class="minus-btn" @click="decrease()">-</button>
              <input type="text" class="quantity-input-field" v-model.number="amount">
              <button class="plus-btn" @click="add()">+</button>
            </div>
          </div>
          <div class="product-total-price">总价: ${{ amount * product.price | toDecimal2 }}</div>
          <button class="add-cart-btn" @click="addCart()">加入购物车</button>
        </div>
      </div>
    </div>

    <div class="list-model">
      <h1>新品推荐</h1>
      <div class="recommendation-list">
        <ul class="goods-list">
          <li v-for="i in recommend">
            <h4><a @click="toDetail(i.id)">{{ i.name }}</a></h4>
            <a @click="toDetail(i.id)"><img :src="serverApiUrl + i.imgurl"></a>
            <div class="prize">¥ {{ i.price }}/{{ i.unit }}</div>
          </li>
        </ul>
      </div>
    </div>

    <div class="list-model">
      <h1>评论区</h1>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="user.nickname" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="content" label="内容">
        </el-table-column>
        <el-table-column prop="rate" label="满意度">
          <template slot-scope="{row}">
            <el-rate v-model="row.rate" disabled show-score text-color="#ff9900" score-template="{value}">
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="日期" width="180">
        </el-table-column>
      </el-table>
      <el-pagination background :page-size="pageSize" layout="prev, pager, next" :total="total" @current-change="changePage"></el-pagination>
    </div>

  </div>
</template>

<script>
import { getProductByIdApi } from '../api/GetProductById'
import { addCartApi } from '../api/AddCart'
import { serverApiUrl } from '../api/serverApiUrl'
import { getNewRecommendApi } from '../api/GetProductById'
import { getCommentApi } from '../api/GetComment'

export default {
  name: "Detail",
  data() {
    return {
      product: "",
      productid: "",
      serverApiUrl: serverApiUrl,
      recommend: [],
      tableData: [],
      pageNo: 1,
      pageSize: 5,
      total: 0,
      amount: 1
    }
  },
  methods: {
    changePage(val) {
      this.pageNo = val;
      this.getComment();
    },
    getParams() {
      this.productid = this.$route.query.id;
    },
    getComment() {
      getCommentApi({
        "productId": this.productid,
        "pageNo": this.pageNo,
        "pageSize": this.pageSize,
      }).then(resp => {
        this.tableData = resp.records;
        this.total = resp.total;
      })
    },
    async getproduct() {
      await getProductByIdApi({ "id": this.productid }).then(resp => {
        this.product = resp;
      });
      await getNewRecommendApi({ "id": this.product.categoryid }).then(resp => {
        this.recommend = resp;
      });
    },
    add() {
      this.amount++;
    },
    decrease() {
      this.amount > 1 ? this.amount-- : 1;
    },
    addCart() {
      const shopcart = {
        productid: this.productid,
        money: this.amount * this.product.price,
        quantity: this.amount,
        userid: JSON.parse(window.sessionStorage.getItem("user")).id,
        created: new Date()
      };
      addCartApi(shopcart).then(resp => {
        if (resp.data == null) {
          alert("添加成功");
        } else {
          alert("添加失败");
        }
      })
    },
    toDetail(id) {
      let routeData = this.$router.resolve({
        path: '/detail',
        query: {
          id: id
        }
      });
      window.open(routeData.href, "_self");
      window.location.reload();
    }
  },
  created() {
    if (JSON.parse(window.sessionStorage.getItem("user")).id == null) {
      this.$router.push("/login");
      return;
    }
    this.$parent.ifShow = true;
    this.getParams();
    this.getproduct();
    this.getComment();
  },
  filters: {
    toDecimal2: function (x) {
      var f = parseFloat(x);
      if (isNaN(f)) {
        return false;
      }
      var f = Math.round(x * 100) / 100;
      let s = f.toString();
      let rs = s.indexOf('.');
      if (rs < 0) {
        rs = s.length;
        s += '.';
      }
      while (s.length <= rs + 2) {
        s += '0';
      }
      return s;
    }
  }
}
</script>

<style scoped>
#Detail {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.search-bar .logo {
    width: 280px;
    height: 140px;
}

.search-con {
  margin-left: 20px;
}

.input-text {
  height: 30px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-btn {
  height: 30px;
  padding: 0 10px;
  margin-left: 10px;
  background-color: #ff5555;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}



.navbar-con {
  margin-bottom: 20px;
}

.navbar {
  display: flex;
  align-items: center;
}

.navbar h1 {
  font-size: 24px;
  font-weight: bold;
}

.navlist {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.navlist li {
  margin-right: 10px;
}

.navlist li a {
  
  text-decoration: none;
}

.list-model {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.product-details {
  display: flex;
  align-items: flex-start;
}

.product-details .product-image {
  flex: 0 0 40%;
  margin-right: 20px;
}

.product-details .product-image img {
  width: 100%;
  border-radius: 8px;
}

.product-details .product-info {
  flex: 1;
}

.product-info .product-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-info .product-description {
  margin-bottom: 10px;
}

.product-price-row {
  margin-bottom: 10px;
}

.product-price-row span {
  display: inline-block;
  margin-right: 10px;
}

.product-price-row .product-price {
  font-size: 20px;
  color: #ff5555;
}

.product-price-row .product-unit,
.product-price-row .product-quantity {
  font-size: 14px;
  color: #555555;
}

.product-quantity-row p {
  font-size: 16px;
  margin-bottom: 5px;
}

.quantity-input {
  display: flex;
  align-items: center;
}

.quantity-input-field {
  width: 50px;
  height: 30px;
  text-align: center;
  border: 1px solid #cccccc;
  border-radius: 4px;
  margin: 0 5px;
  padding: 5px;
}

.quantity-input-field:focus {
  outline: none;
  border-color: #ff5555;
}

.minus-btn,
.plus-btn {
  width: 30px;
  height: 30px;
  background-color: #ff5555;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.minus-btn:hover,
.plus-btn:hover {
  background-color: #e04c4c;
}

.product-total-price {
  font-size: 16px;
  margin-top: 10px;
}

.add-cart-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ff5555;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.add-cart-btn:hover {
  background-color: #e04c4c;
}

.recommendation-list {
  margin-top: 20px;
}

.goods-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.goods-list li {
  flex: 0 0 33.33%;
  margin-bottom: 20px;
}

.goods-list li h4 {
  font-size: 16px;
  margin-bottom: 5px;
}

.goods-list li a {
  text-decoration: none;
  color: #ff5555;
}

.goods-list li img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}

.prize {
  font-size: 14px;
  color: #555555;
}

.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
